<template>
    <view class="panel">
        <!-- panel 的主体区域 -->
        <view class="panel-body">
            <!-- panel 的 item 项 -->
            <view class="panel-item">
                <text>8</text>
                <text>收藏的店铺</text>
            </view>
            <view class="panel-item">
                <text>14</text>
                <text>收藏的商品</text>
            </view>
            <view class="panel-item">
                <text>18</text>
                <text>关注的商品</text>
            </view>
            <view class="panel-item">
                <text>84</text>
                <text>足迹</text>
            </view>
        </view>
    </view>
</template>

<script>
   export default {
      data() {
         return {

         };
      },
      onLoad() {

      },
      methods: {

      }
   };
</script>

<style scoped lang='scss'>
    .panel-list {
        padding: 0 10px;
        position: relative;
        top: -10px;
        .panel {
            background-color: white;
            border-radius: 3px;
            margin-bottom: 8px;
            .panel-body {
                display: flex;
                justify-content: space-around;
                .panel-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    font-size: 13px;
                    padding: 10px 0;
                }
            }
        }
    }
</style>